<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>设备维修记录</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="repair-record">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addRecord">新增记录</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :dropdown-option="dropdownOption"></search-form>
        </div>
      </search-btn-view>

      <div class="repair-record-table-div">
        <el-table fit stripe border :data="recordList" style="width: 100%" height="parent">
          <el-table-column label="设备型号" prop="machineModel" min-width="150px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="故障部件" prop="workBrokenPart" width="120px" align="center"></el-table-column>
          <el-table-column label="故障描述" prop="workBrokenDescription" min-width="200px" header-align="center">
            <template slot-scope="scope">
              <div v-html="getTextHtml(scope.row.workBrokenDescription)"></div>
            </template>
          </el-table-column>
          <el-table-column label="解决方案" prop="workBrokenSolveWay" min-width="200px" header-align="center">
            <template slot-scope="scope">
              <div v-html="getTextHtml(scope.row.workBrokenSolveWay)"></div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" prop="status" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('machineRepair.repairRecord.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" prop="handle" width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateRecord(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="dialogType==='add'?'新增维修记录':'修改维修记录'" :visible.sync="openDialog" top="10vh" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <repair-record-form v-if="openDialog" :repair="selectRecord" :type="dialogType" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </repair-record-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/searchForm.css",
    "./css/repairRecordForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>

<script src="./searchForm.js"></script>
<script src="./repairRecordForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        machineModel: "",
        workBrokenPart: "",
        workBrokenDescription: "",
        workBrokenSolveWay: "",
        status: ""
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        recordList: [],
        dropdownOption: {},
        openDialog: false,
        dialogType: '',
        selectRecord: null
      };
    },

    created: function () {
      this.setRecordList();
    },

    methods: {
      setRecordList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var fields = ['machineModel', 'workBrokenPart', 'workBrokenDescription', 'workBrokenSolveWay', 'status'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/getWorkOrderInfoForCustmerOperate', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var recordList = res.returnData;

          self.recordList = recordList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setRecordList(true);
      },

      pageChange: function () {
        this.setRecordList();
      },

      getTextHtml: function (text) {
        if (SysUtil.isEmpty(text)) {
          return '';
        }
        var htmlText = _.escape(text);
        htmlText = htmlText.replace(/ /g, '&nbsp;').replace(/\n/g, '<br>');
        return htmlText;
      },

      addRecord: function () {
        this.dialogType = 'add';
        this.openDialog = true;
      },

      updateRecord: function (record) {
        this.selectRecord = record;
        this.dialogType = 'update';
        this.openDialog = true;
      },

      saveSuccess: function () {
        this.openDialog = false;
        this.setRecordList();
      },

      dialogClosed: function () {
        this.selectRecord = null;
        this.dialogType = '';
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      RepairRecordForm: RepairRecordForm
    }
  });

</script>

<style>
  .repair-record {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .repair-record .repair-record-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
